<script setup lang="ts">
import ToastProvider from "@/components/toast-provider/index.vue";

import AppInside from "./app-inside.vue";
import { darkTheme, lightTheme } from "naive-ui";
import { onMounted, onUnmounted, ref } from "vue";
import type { BuiltInGlobalTheme } from "naive-ui/es/themes/interface";

const theme = ref<BuiltInGlobalTheme>(window.matchMedia('(prefers-color-scheme:dark)').matches ? darkTheme : lightTheme);

let mediaQueryList: MediaQueryList | null = null;

function onColorSchemaChange(ev: MediaQueryListEvent) {
    theme.value = ev.matches ? darkTheme : lightTheme;
}

onMounted(() => {
    mediaQueryList = window.matchMedia('(prefers-color-scheme:dark)');
    mediaQueryList.addEventListener("change", onColorSchemaChange);
});
onUnmounted(() => {
    if (mediaQueryList) {
        mediaQueryList.removeEventListener("change", onColorSchemaChange);
        mediaQueryList = null;
    }
});
</script>

<template>
    <n-config-provider :theme="theme">
        <n-message-provider :max="3">
            <n-notification-provider>
                <n-dialog-provider>

                    <toast-provider>
                        <app-inside/>
                    </toast-provider>

                </n-dialog-provider>
            </n-notification-provider>
        </n-message-provider>
    </n-config-provider>
</template>

<style scoped>
.n-config-provider {
    height: 100%;
}
</style>